<template>
    <view style="background-color: #ffffff;">
        <view class="u-page">
		<view class="u-demo-block">
			<text class="u-demo-block__title">基础功能</text>
			<view class="u-demo-block__content">
					<eui-tag
					    text="标签"
					    plain
					    size="mini"
					    type="warning"
					>
					</eui-tag>
				</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">主题primary、warning、success、error、info</text>
			<view class="u-demo-block__content">
					<eui-tag text="标签">
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="warning"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="success"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="error"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="info"
					>
					</eui-tag>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">自定义主题颜色</text>
			<view class="u-demo-block__content">
					<eui-tag text="标签" bgColor="rgba(212, 128, 255, 0.05)" borderColor="rgba(212, 128, 255, 0.3)" color="rgba(212, 128, 255, 1)">
					</eui-tag>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">圆形标签</text>
			<view class="u-demo-block__content">
					<eui-tag
					    text="标签"
					    plain
						shape="circle"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="warning"
						shape="circle"
					>
					</eui-tag>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">镂空标签</text>
			<view class="u-demo-block__content">
					<eui-tag
					    text="标签"
					    plain
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="warning"
					    plain
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="success"
					    plain
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="error"
					    plain
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="info"
					    plain
					>
					</eui-tag>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">镂空带背景色</text>
			<view class="u-demo-block__content">
					<eui-tag
					    text="标签"
					    plain
					    plainFill
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="warning"
					    plain
					    plainFill
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="success"
					    plain
					    plainFill
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="error"
					    plain
					    plainFill
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="info"
					    plain
					    plainFill
					>
					</eui-tag>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">自定义尺寸/样式</text>
			<view class="u-demo-block__content">
					<eui-tag
					    text="标签"
					    plain
					    size="mini"
                        :showBorder="false"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="warning"
					    plain
					    plainFill
                        :showBorder="false"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="warning"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="success"
					    plain
					    size="large"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="success"
					    plain
					    size="large"
						borderRadius="16px  16px  16px  0px"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
					    type="success"
					    plain
					    size="large"
						borderRadius="0px  38.5px  38.5px  0px"
					>
					</eui-tag>
					<eui-tag
					    text="标签"
						bgColor="#7863FF" borderColor="#7863FF"
						color="#7863FF" plain plainFill
					    
					>
					</eui-tag>
					<eui-tag
					    text="标签"
						bgColor="rgba(189, 143, 36, 0.03)" borderColor="rgba(189, 143, 36, 0.5)"
						color="rgba(189, 143, 36, 1)" plain plainFill
					>
					</eui-tag>
			</view>
		</view>
	</view>
    </view>
	
</template>

<script>
	export default {
		data() {
			return {
				close1: true,
				close2: true,
				close3: true,
				radios: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				checkboxs: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				]
			}
		},
		methods: {
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			}
		}
	}
</script>

<style lang="scss">
.u-block {
	padding: 14px;
	&__section {
		margin-bottom:10px;
	}
	&__title {
		margin-top:10px;
		font-size: 15px;
		margin-bottom:10px;
	}
	&__flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
	}
}

// 使用了cell组件的icon图片样式
.u-cell-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}

.u-page {
	padding: 15px 15px 40px 15px;
	&__item {
		flex: 1;
		// margin-bottom: 23px;
		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			// margin-bottom: 8px;
			display: flex;
            flex-direction: row;
		}
	}
}

.u-demo-block {
	flex: 1;
	margin-bottom: 23px;
	
	&__content {
        display: flex;
        flex-direction: column;
	}
	
	&__title {
		font-size: 14px;
		color: rgb(143, 156, 162);
		margin-bottom: 8px;
        display: flex;
        flex-direction: row;
	}
}

	.u-demo-block__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
</style>
